<template>
  <div class="onebox">
    <div class="main">
      <div class="bt">银行征信</div>
      <div class="list_box">
        <div class="list" v-for="(item,index) in bankCreditReporting" :key="index">
          <div class="title">{{item.detail}}</div>
        </div>
      </div>
      <div class="bt">失信记录</div>
      <div class="list_box">
        <div class="list">
          <div class="title" @click="handleShow(1)">
            该公司法人有失信记录(<span style="color: red">{{
              breakFaith.length
            }}</span>)
          </div>
          <div class="table" v-if="oneShow">
            <el-table :data="breakFaith" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="列入日期" width="180"></el-table-column>
              <el-table-column prop="detail" label="列入失信记录原因" width="180"></el-table-column>
              <el-table-column prop="unit" label="作出决定机关"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bt">限制消费令</div>
      <div class="list_box">
        <div class="list">
          <div class="title" @click="handleShow(2)">
            该公司法人被限制消费(<span style="color: red">{{
              limitConsumption.length
            }}</span>)
          </div>
          <div class="table" v-if="twoShow">
            <el-table :data="limitConsumption" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="立案日期" width="180"></el-table-column>
              <el-table-column prop="issueDate" label="发布日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="unit" label="申请人信息"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bt">法院公告</div>
      <div class="list_box">
        <div class="list">
          <div class="title" @click="handleShow(3)">
            该公司被起诉的法院公告(<span style="color: red">{{
              announcementBeProsecute.length
            }}</span>)
          </div>
          <div class="table" v-if="threeShow">
            <el-table :data="announcementBeProsecute" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="刊登日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号" width="180"></el-table-column>
              <el-table-column prop="caseReason" label="案由"></el-table-column>
              <el-table-column prop="name" label="案件身份" width="180">
                <template slot-scope="scope">
                  <p>原告 - {{ scope.row.caseIdentityOne }}</p>
                  <p>
                    被告 -
                    <span style="color: #1890ff">{{
                      scope.row.caseIdentityTwo
                    }}</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="announcementType" label="公告类型" width="180"></el-table-column>
              <el-table-column prop="court" label="法院" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="list">
          <div class="title" @click="handleShow(4)">
            该公司起诉他人或公司的法院公告(<span style="color: red">{{
              announcementProsecute.length
            }}</span>)
          </div>
          <div class="table" v-if="fourShow">
            <el-table :data="announcementProsecute" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="刊登日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号" width="180"></el-table-column>
              <el-table-column prop="caseReason" label="案由"></el-table-column>
              <el-table-column prop="name" label="案件身份">
                <template slot-scope="scope">
                  <p>原告 - {{ scope.row.caseIdentityOne }}</p>
                  <p>
                    被告 -
                    <span style="color: #1890ff">{{
                      scope.row.caseIdentityTwo
                    }}</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="announcementType" label="公告类型" width="180"></el-table-column>
              <el-table-column prop="court" label="法院" width="180"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="bt">立案信息</div>
      <div class="list_box">
        <div class="list">
          <div class="title" @click="handleShow(5)">
            该公司法人被起诉的立案信息(<span style="color: red">{{
              registerBeProsecute.length
            }}</span>)
          </div>
          <div class="table" v-if="fiveShow">
            <el-table :data="registerBeProsecute" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="立案日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号"></el-table-column>
              <el-table-column prop="name" label="案件身份" width="180">
                <template slot-scope="scope">
                  <p>原告 - {{ scope.row.caseIdentityOne }}</p>
                  <p>
                    被告 -
                    <span style="color: #1890ff">{{
                      scope.row.caseIdentityTwo
                    }}</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="court" label="法院"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="list">
          <div class="title" @click="handleShow(6)">
            该公司法人起诉他人或公司的立案信息(<span style="color: red">{{
              registerProsecute.length
            }}</span>)
          </div>
          <div class="table" v-if="sixShow">
            <el-table :data="registerProsecute" style="width: 100%" border>
              <el-table-column type="index" label="序号" width="50"></el-table-column>
              <el-table-column prop="date" label="刊登日期" width="180"></el-table-column>
              <el-table-column prop="caseNo" label="案号"></el-table-column>
              <el-table-column prop="name" label="案件身份">
                <template slot-scope="scope">
                  <p>原告 - {{ scope.row.caseIdentityOne }}</p>
                  <p>
                    被告 -
                    <span style="color: #1890ff">{{
                      scope.row.caseIdentityTwo
                    }}</span>
                  </p>
                </template>
              </el-table-column>
              <el-table-column prop="court" label="法院"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";
  import handlePageMixin from "@/mixins/handlePageMixin";

  // api
  import {
    legalPersonRisk
  } from "@/api/warningComplaint";
  import {
    string
  } from "jszip/lib/support";

  export default {
    components: {},
    props: {
      merchantId: string,
    },
    mixins: [handlePageMixin],
    data() {
      return {
        loading: false,
        oneShow: false,
        twoShow: false,
        threeShow: false,
        fourShow: false,
        fiveShow: false,
        sixShow: false,
        announcementBeProsecute: [], //法律公告被起诉
        announcementProsecute: [], //法律公告起诉他人
        registerBeProsecute: [], //立案被起诉
        registerProsecute: [], //立案起诉他人
        bankCreditReporting: [], //银行征信
        breakFaith: [], //失信记录
        limitConsumption: [], //限制消费令
        courtColumn: [{
            prop: "id",
            label: "刊登日期",
            width: 120
          },
          {
            prop: "type",
            label: "案号",
            width: 120
          },
          {
            prop: "content",
            label: "案由",
            width: 220
          },
          {
            prop: "merchantName",
            label: "案件身份"
          },
          {
            prop: "shopName",
            label: "公告类型",
            width: 200
          },
          {
            prop: "createTime",
            label: "法院",
            width: 220
          },
        ],
      };
    },
    computed: {},
    updated() {},
    created() {
      this.getList();
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      handleShow(data) {
        if (data == 1) {
          this.oneShow = !this.oneShow;
        } else if (data == 2) {
          this.twoShow = !this.twoShow;
        } else if (data == 3) {
          this.threeShow = !this.threeShow;
        } else if (data == 4) {
          this.fourShow = !this.fourShow;
        } else if (data == 5) {
          this.fiveShow = !this.fiveShow;
        } else if (data == 6) {
          this.sixShow = !this.sixShow;
        }
      },
      //列表
      getList() {
        var merchantId = this.merchantId;
        this.loading = true;
        legalPersonRisk(merchantId)
          .then((res) => {
            const {
              announcementBeProsecute,
              announcementProsecute,
              registerBeProsecute,
              registerProsecute,
              bankCreditReporting,
              breakFaith,
              limitConsumption
            } = res.result;
            console.log("列表", res.result);
            this.announcementBeProsecute = announcementBeProsecute;
            this.announcementProsecute = announcementProsecute;
            this.registerBeProsecute = registerBeProsecute;
            this.registerProsecute = registerProsecute;
            this.bankCreditReporting = bankCreditReporting;
            this.breakFaith = breakFaith;
            this.limitConsumption = limitConsumption;
          })
          .finally(() => {
            this.loading = false;
          });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .onebox {
    .main {
      padding: 0 20px;

      .bt {
        font-size: 24px;
        color: #333;
        font-weight: bold;
        margin-top: 40px;
      }

      .list_box {
        padding-top: 20px;
        padding-left: 28px;
        cursor: pointer;

        .list {
          margin-bottom: 20px;

          .title {
            font-size: 17px;
            color: #333;
          }

          .title:hover {
            color: rgb(26, 113, 243) !important;
          }

          .table {
            margin-top: 14px;
          }
        }
      }
    }
  }

</style>
